分頁跟按紐連結_影片

2024 iThome 鐵人賽

DAY 8

自我挑戰組

asp.net可以變出那些功能系列第 8 篇

16th鐵人賽

Tzu

2024-09-15 00:03:49

84 瀏覽

分享至

終於要來解釋第2天的分頁內容
在網站https://laihao2.com/Home/Index2

這裡分頁所使用的資料庫是
Northwind跟pubs北風資料庫
北風資料庫(Northwind)是微軟提供的一個範例資料庫

北風資料庫(Northwind):這裡要用到的資料類型

北風資料庫(Northwind): 這裡要用到的內容

這裡要特別注意的地方~
這裡要特別注意的地方~
這裡要特別注意的地方~

很重要所以說三次!!!

分頁:下載套件

下載完要將專案就是整個Microsoft Visual Studio重啟
下載完要將專案就是整個Microsoft Visual Studio重啟

下載完要將專案就是整個Microsoft Visual Studio重啟
很重要所以說三次!!!

這樣專案才可以抓到下載的套件

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表設定好>再寫程式:加入資料庫>串聯資料庫>(這裡前面的步驟可以參考前幾天)

產生Models裡面類別檔dao>第一個檔案

產生Models裡面類別檔dao>第2個檔案

按:建置>(參考前面)

Web config的第2個資料庫連線 (其實到網站的部屬連線也是改這樣的形式)

Controllers裡面的Entities>

public ActionResult Index2(int page = 1)
        {
            int currentPage = page < 1 ? 1 : page;
            var products = _db2.Products2.OrderBy(m => m.ProductID).ToList();
            var result = products.ToPagedList(currentPage, pageSize);
            return View(result);
        }

解釋程式碼:
這段代碼是一個 ASP.NET MVC 控制器中的 Index2 方法，用於分頁顯示產品數據。我們來逐步解釋：

1. `public ActionResult Index2(int page = 1)`

這是一個公開的 ActionResult 方法，表示這是一個用於處理網頁請求的控制器方法。
方法名為 Index2。
int page = 1：這是一個帶有默認值的參數，表示當前的分頁頁碼，默認為第 1 頁。如果用戶沒有提供 page 參數，則使用默認的 1。

2. `int currentPage = page < 1 ? 1 : page;`

這行代碼使用了三元運算符，確保頁碼不能小於 1。
如果 page 小於 1，currentPage 被設置為 1；否則，它將使用傳入的 page 參數。

3. `var products = _db2.Products2.OrderBy(m => m.ProductID).ToList();`

這里從數據庫上下文 _db2 中獲取 Products2 表的所有產品，並按 ProductID 升序排列。
OrderBy(m => m.ProductID)：根據 ProductID 排序。
ToList()：將查詢結果轉換為一個 List，即一個可枚舉的產品列表。

4. `var result = products.ToPagedList(currentPage, pageSize);`

這行代碼將 products 列表進行分頁處理。
ToPagedList 是一個分頁擴展方法，它將大列表按頁分成小列表，通常需要傳入當前頁 currentPage 和每頁顯示的數量 pageSize。
pageSize 可能是一個事先定義的變量，決定了每頁顯示多少條記錄。

5. `return View(result);`

這一行將分頁後的產品列表 result 傳遞給視圖，顯示在前端頁面上。

總結

這個方法的作用是獲取產品數據，按照 ProductID 排序後，根據傳入的分頁參數（page）進行分頁處理，並將結果傳遞給視圖用於顯示。

產生畫面View

產生的程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact12";
}

<div class="farm-wrapper">

    <h3>作品-奢華網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
            @section styles {
                <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
            }

            <title>奢華風格網站</title>
            <style>
                /* 全域樣式 */
                body {
                    font-family: 'Playfair Display', serif; /* 高級字體 */
                    background-color: #121212;
                    color: #e5e5e5;
                    margin: 0;
                    padding: 0;
                }

                /* 標題樣式 */
                h1 {
                    font-size: 60px;
                    color: #d4af37; /* 金色 */
                    text-align: center;
                    margin-top: 50px;
                }

                /* 導航樣式 */
                nav ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    text-align: center;
                    background-color: #222;
                }

                nav li {
                    display: inline-block;
                    margin: 0 15px;
                }

                nav a {
                    text-decoration: none;
                    color: #e5e5e5;
                    padding: 15px 25px;
                    transition: all 0.3s ease;
                }

                    nav a:hover {
                        color: #d4af37;
                        border-bottom: 2px solid #d4af37;
                    }

                /* 英雄區樣式 */
                .hero {
                    text-align: center;
                    background-image: url('hero-image.jpg');
                    background-size: cover;
                    background-position: center;
                    padding: 150px 0;
                }

                    .hero h2 {
                        font-size: 48px;
                        color: #fff;
                        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
                        margin-bottom: 10px;
                    }

                    .hero p {
                        font-size: 24px;
                        color: #ccc;
                    }

                /* 產品區樣式 */
                .products {
                    max-width: 1000px;
                    margin: 0 auto;
                    padding: 60px 0;
                    text-align: center;
                }

                .slider {
                    display: flex;
                    justify-content: space-around;
                }

                .slide {
                    width: 30%;
                    padding: 20px;
                    background-color: #333;
                    color: #fff;
                    transition: transform 0.5s ease;
                }

                    .slide.active {
                        transform: scale(1.1);
                        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
                    }
            </style>
        </head>
        <body>
            <header>
                <h1>奢華品牌</h1>
                <nav>
                    <ul>
                        <li><a href="#">首頁</a></li>
                        <li><a href="#">產品</a></li>
                        <li><a href="#">關於我們</a></li>
                        <li><a href="#">聯絡我們</a></li>
                    </ul>
                </nav>
            </header>

            <main>
                <div class="hero">
                    <img src="~/templates/date_img.jpg" alt="My Photo" style="width: 200px; height: auto; float: left; " />
                    <h2>探索奢華</h2>
                    <p>品味頂級生活</p>
                </div>

                <section class="about-us">
                    <h2>關於我們</h2>
                    <p>我們的品牌創立於2024年，致力於提供頂級品質的奢華產品。我們的使命是將卓越的工藝和獨特的設計融合，為每一位顧客帶來無與倫比的體驗。</p>
                    <p>我們的願景是成為全球領先的奢華品牌，提供創新且經典的產品，讓每一位顧客都能感受到我們的獨特魅力。</p>
                </section>

                <section class="products">
                    <h2>我們的產品</h2>
                    <div class="slider">
                        <div class="slide active">
                            <h3>產品 1</h3>
                            <p>這是一款融合了現代設計和傳統工藝的奢華產品，采用高品質的材料，細節精緻，完美展現您的品味。</p>
                        </div>
                        <div class="slide">
                            <h3>產品 2</h3>
                            <p>我們的產品 2 結合了創新的技術和精湛的工藝，為您帶來無與倫比的舒適體驗和高端感受。</p>
                        </div>
                        <div class="slide">
                            <h3>產品 3</h3>
                            <p>產品 3 是我們最受歡迎的款式之一，其獨特的設計和優質的材料，使其成為任何場合的完美選擇。</p>
                        </div>
                    </div>
                </section>

                <section class="testimonials">
                    <h2>客戶評價</h2>
                    <blockquote>
                        <p>“這個品牌的產品真是太棒了！每次使用都感覺到奢華與舒適。” - 張小姐</p>
                    </blockquote>
                    <blockquote>
                        <p>“我非常滿意我的購物體驗，服務一流，產品質量超出預期。” - 李先生</p>
                    </blockquote>
                </section>

                <section class="news">
                    <h2>最新消息</h2>
                    <article>
                        <h3>新品發布：奢華系列 2024</h3>
                        <p>我們很高興宣布即將推出全新奢華系列，包含多款精美設計的產品，敬請期待！</p>
                        <a href="#">閱讀更多</a>
                    </article>
                    <article>
                        <h3>品牌故事：從創立到現在</h3>
                        <p>了解我們的品牌歷程和未來展望，探索我們如何成為領先的奢華品牌。</p>
                        <a href="#">閱讀更多</a>
                    </article>
                </section>
            </main>

           
            <script>
                const slides = document.querySelectorAll('.slide');
                let currentSlide = 0;

                const nextSlide = () => {
                    slides[currentSlide].classList.remove('active');
                    currentSlide = (currentSlide + 1) % slides.length;
                    slides[currentSlide].classList.add('active');
                };

                // 定時切換
                setInterval(nextSlide, 3000);
            </script>
        </body>
        </html>

解釋程式碼:
這段代碼是一個 ASP.NET MVC 的視圖文件，使用了 Razor 語法和 PagedList 擴展庫來顯示分頁的產品列表。我們來逐步解釋它的組成部分：

1. `@@model IEnumerable<WebApplication5.Models.Products> @`

這是一行注釋代碼，原本用於聲明視圖的數據模型類型（IEnumerable<WebApplication5.Models.Products>），表示視圖將接收 Products 對象的集合。

2. `@model IPagedList<WebApplication5.Models.Products>`

這一行是實際使用的模型聲明，IPagedList<WebApplication5.Models.Products> 表示這個視圖使用了分頁的 Products 列表，IPagedList 是 PagedList 庫提供的接口，支持分頁的功能。

3. `@using PagedList` 和 `@using PagedList.Mvc`

這兩行代碼導入了用於分頁的命名空間。PagedList 提供了分頁處理功能，而 PagedList.Mvc 提供了分頁的輔助方法（如 PagedListPager）。

4. `<p> @@Html.ActionLink("Create New", "Create")@ </p>`

這一行包含了一個注釋的代碼，原本用於生成一個“創建新產品”的鏈接。

5. `<table class="table">`

創建了一個 HTML 表格來顯示產品列表。class="table" 可能用於附加樣式（比如引入 Bootstrap 表格樣式）。

6. 表格標題部分

<tr>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().ProductName)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().SupplierID)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().CategoryID)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().QuantityPerUnit)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().UnitPrice)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().UnitsInStock)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().UnitsOnOrder)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().ReorderLevel)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().Discontinued)</th>
    <th></th>
</tr>

這里是表格的標題行，使用 @Html.DisplayNameFor 自動獲取 Products 模型中字段的顯示名稱。
FirstOrDefault() 取 Products 集合中的第一個元素來獲取字段名稱，只用來展示標題。

7. 數據行部分

@foreach (var item in Model)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => item.ProductName)</td>
        <td>@Html.DisplayFor(modelItem => item.SupplierID)</td>
        <td>@Html.DisplayFor(modelItem => item.CategoryID)</td>
        <td>@Html.DisplayFor(modelItem => item.QuantityPerUnit)</td>
        <td>@Html.DisplayFor(modelItem => item.UnitPrice)</td>
        <td>@Html.DisplayFor(modelItem => item.UnitsInStock)</td>
        <td>@Html.DisplayFor(modelItem => item.UnitsOnOrder)</td>
        <td>@Html.DisplayFor(modelItem => item.ReorderLevel)</td>
        <td>@Html.DisplayFor(modelItem => item.Discontinued)</td>
    </tr>
}

這里是使用 foreach 循環遍歷 Model（即分頁後的 Products 列表），為每個 item 生成一行數據。
使用 @Html.DisplayFor 顯示產品的各個字段內容，如 ProductName, SupplierID, CategoryID 等。

8. 分頁部分

@Html.PagedListPager(Model, page => Url.Action("Index2", new { page }))

@Html.PagedListPager 是 PagedList.Mvc 提供的分頁導航控件。
它根據 Model（即 IPagedList）來生成分頁導航鏈接，並且會生成調用 Index2 方法的 URL，通過 page 參數指定當前頁碼。

總結

這個視圖用來顯示分頁後的產品列表，支持對產品信息的表格展示，並使用 PagedListPager 控件實現分頁功能。

跟按紐連結_影片
https://laihao2.com/Home/Contact2
這裡社群媒體>按影片

這裡沒有用到資料庫所以只有

Controllers裡面的Entities>

public ActionResult Contact2()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是一個 ASP.NET MVC 控制器中的 Contact2 方法，用於處理與 "Contact" 頁面相關的請求。我們來逐步解釋它的結構和功能：

1. `public ActionResult Contact2()`

這是一個公開的 ActionResult 方法，意味著它可以通過 HTTP 請求訪問。
方法名為 Contact2，通常與 "Contact" 頁面相關聯，但這里用了不同的名稱 Contact2，可能是另一個類似的頁面。
它不接受任何參數。

2. `ViewBag.Message = "Your contact page.";`

這一行使用了 ViewBag，它是一個動態對象，允許你在控制器中向視圖傳遞數據。
ViewBag.Message 被設置為 "Your contact page."，這條消息可以在視圖中顯示，通常用於頁面標題或說明文本。

3. `return View();`

這行代碼表示返回一個視圖，它會去尋找與控制器和方法名稱匹配的視圖文件。默認情況下，它會尋找名為 Contact2.cshtml 的視圖文件。
View() 方法會將 ViewBag 中的數據一起傳遞給視圖。

總結

這個方法的作用是處理對 Contact2 頁面（類似“聯系我們”頁面）的請求，設置一條消息，並將頁面渲染給用戶。

產生畫面View

@{
    ViewBag.Title = "Contact2";
}
<h3></h3>
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
    <title>程式教學</title>
    <style>
        img {
            border-radius: 50%;
        }

        body {
            background-color: lightskyblue;
            margin: 0;
            padding-top: 60px; /* 為導覽列騰出空間 */
        }

        .content-container {
            text-align: center;
            max-width: 600px;
            margin: 0 auto; /* 水平居中 */
            padding: 20px;
        }

        dl {
            margin-left: 20px;
        }

        dd {
            margin-left: 20px;
        }

        .button-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        .pink-button {
            background-color: pink;
            color: black;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            display: inline-block;
            text-align: center;
            transition: background-color 0.3s;
            width: 200px;
        }

            .pink-button:hover {
                background-color: #ff69b4;
            }
    </style>
</head>
<body>
    <div class="content-container">
        <h1>程式教學</h1>
        <p>
            <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />
        </p>
        <p>
            因為有實戰經驗，因此也可以教學程式，<br>
            歡迎大家觀賞我的相關作品影片！
        </p>
        <div class="button-container">
            <a href="https://www.youtube.com/watch?v=w92Ja66w5os" class="pink-button">Asp.net教學影片</a>
            <a href="https://www.youtube.com/watch?v=WDVCQnh2LEk" class="pink-button">Java教學影片1</a>
            <a href="https://www.youtube.com/watch?v=VjkGPFXigqo" class="pink-button">Java教學影片2</a>
        </div>
    </div>
</body>
</html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 視圖文件，結合了 HTML 和 Razor 語法，主要用於顯示一個程式教學頁面。它使用 CSS 來控制頁面的樣式，添加了圖片、文本和幾個鏈接按鈕，指向外部的教學影片。我們來逐步解析它的內容：

1. `@{ ViewBag.Title = "Contact2"; }`

這行代碼使用 Razor 語法將 ViewBag.Title 設置為 "Contact2"，這是頁面的標題。
它會影響頁面的 <title> 標簽，通常顯示在瀏覽器標簽頁上。

2. `<h3></h3>`

這是一個空的 <h3> 標題標簽，雖然沒有內容，但可以在以後填入標題文本。可以刪除或填入合適的標題。

3. `<!DOCTYPE html> ... <html lang="zh-Hant-TW">`

聲明文檔的類型為 HTML5，並指定網頁語言為繁體中文（zh-Hant-TW 表示台灣繁體中文）。

4. `<meta charset="UTF-8">`

設置網頁的字符編碼為 UTF-8，確保網頁支持多語言字符集。

5. `<link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">`

引入了一個外部樣式表 reset.css，通常用於重置瀏覽器的默認樣式，以保證不同瀏覽器之間的顯示一致性。
@Url.Content() 是 Razor 語法，用來生成項目內資源的正確 URL。

6. 內嵌的 CSS 樣式

設置了全局的樣式，定義了頁面元素的外觀。
- img { border-radius: 50%; }：將圖片圓角化，形成圓形。
- body { background-color: lightskyblue; }：將頁面背景色設置為淺天藍色，頁面頂部留有 60px 空白，以騰出空間。
- content-container { text-align: center; max-width: 600px; margin: 0 auto; }：容器居中，寬度不超過 600px。
- dl 和 dd：定義列表的樣式。
- .button-container { display: flex; flex-direction: column; }：按鈕容器使用 flex 布局，垂直排列按鈕並設置間距。
- .pink-button { background-color: pink; }：按鈕的初始顏色為粉紅色，懸停時變為亮粉色。

7. 頁面主體內容

<div class="content-container">：這是頁面的主要容器，內容包括標題、圖片、介紹文本和教學影片按鈕。
- <h1>程式教學</h1>：主標題為“程式教學”。
- <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />：顯示一張圖片，寬度為 200px，且根據寬度自動調整高度，border-radius 將使圖片呈圓形。
- <p>：介紹部分的文本內容，用 <br> 強制換行。文中介紹作者有實際的程式教學經驗。
- <div class="button-container">：包含三個教學影片的鏈接按鈕。
  - 每個 <a> 標簽表示一個鏈接，使用 .pink-button 樣式，使按鈕有一致的外觀和懸停效果。

8. 影片鏈接按鈕

每個按鈕都是指向外部的教學影片：
- 第一個按鈕指向 ASP.NET 的教學影片。
- 第二和第三個按鈕分別指向兩個 Java 教學影片。

總結

這個頁面展示了作者的程式教學內容，包含了文字介紹、圖片以及三個鏈接按鈕，供用戶點擊觀看程式教學影片。

大家明天見~

新增功能

品牌/童趣網站

系列文

asp.net可以變出那些功能共 30 篇

RSS系列文訂閱系列文

1 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22208 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

asp.net可以變出那些功能系列 第 8 篇